"use client";

import { useState, useEffect } from "react";
import { useAuth } from "@/contexts/auth-context";
import { AuthGuard } from "@/components/auth/auth-guard";
import { UserService } from "@/services/user.service";
import { Activity, Heart, Brain, Laptop2 } from "lucide-react";
import Link from "next/link";

export default function DashboardPage() {
  const { user } = useAuth();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 可以在这里加载用户的统计数据
    setIsLoading(false);
  }, []);

  return (
    <AuthGuard>
      <div className="container mx-auto py-8 px-4">
        {/* 欢迎信息 */}
        <div className="mb-12">
          <h1 className="text-4xl font-bold mb-4">
            欢迎回来，{user?.username} 👋
          </h1>
          <p className="text-muted-foreground">
            这里是您的健康数据中心，让我们一起关注身心健康
          </p>
        </div>

        {/* 快速访问卡片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          <Link
            href="/health"
            className="bg-card p-6 rounded-xl shadow-lg hover:shadow-xl transition-all group"
          >
            <Activity className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
            <h3 className="font-bold mb-2">健康数据</h3>
            <p className="text-sm text-muted-foreground">
              记录和追踪您的健康指标
            </p>
          </Link>

          <Link
            href="/mood"
            className="bg-card p-6 rounded-xl shadow-lg hover:shadow-xl transition-all group"
          >
            <Heart className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
            <h3 className="font-bold mb-2">心情记录</h3>
            <p className="text-sm text-muted-foreground">
              记录每一天的情绪变化
            </p>
          </Link>

          <Link
            href="/memo"
            className="bg-card p-6 rounded-xl shadow-lg hover:shadow-xl transition-all group"
          >
            <Brain className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
            <h3 className="font-bold mb-2">心路笔记</h3>
            <p className="text-sm text-muted-foreground">
              记录生活点滴，获取AI建议
            </p>
          </Link>

          <Link
            href="/devices"
            className="bg-card p-6 rounded-xl shadow-lg hover:shadow-xl transition-all group"
          >
            <Laptop2 className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
            <h3 className="font-bold mb-2">设备管理</h3>
            <p className="text-sm text-muted-foreground">
              管理您的智能健康设备
            </p>
          </Link>
        </div>

        {/* 用户信息卡片 */}
        <div className="bg-card rounded-xl p-8 shadow-lg mb-12">
          <h2 className="text-2xl font-bold mb-6">个人信息</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div>
              <p className="text-sm text-muted-foreground mb-1">用户名</p>
              <p className="font-medium">{user?.username}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground mb-1">邮箱</p>
              <p className="font-medium">{user?.email}</p>
            </div>
            <div>
              <p className="text-sm text-muted-foreground mb-1">注册时间</p>
              <p className="font-medium">
                {new Date(user?.createdAt || "").toLocaleDateString()}
              </p>
            </div>
          </div>
        </div>

        {/* 健康提示 */}
        <div className="bg-gradient-to-r from-primary/5 to-primary/10 rounded-xl p-8">
          <h2 className="text-2xl font-bold mb-6">今日健康提示</h2>
          <p className="text-muted-foreground">
            保持规律的作息时间，适量运动，注意饮食均衡，这些都是维持健康的重要因素。
            记得定期记录您的健康数据，这样我们可以更好地了解您的健康状况。
          </p>
        </div>
      </div>
    </AuthGuard>
  );
}
